﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Tabs</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <link href="../../scripts/miniui/themes/olive2003/skin.css" rel="stylesheet" type="text/css" />
    
</head>
<body>
    <h1>Tabs 选项卡</h1>      
    
    <div style="padding-bottom:8px;">
        TabPosition：
        <select onchange="onTabPositionChange(this.value)">
            <option value="left">Left</option>
            <option value="top" selected>Top</option>
            <option value="right">Right</option>
            <option value="bottom">Bottom</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        TabAlign：
        <select onchange="onTabAlignChange(this.value)">
            <option value="left" selected>Left</option>
            <option value="center">Center</option>
            <option value="right">Right</option>
            <option value="fit">Fit</option>
        </select>
    </div>
<div id="tabs1" class="mini-tabs" activeIndex="0" style="width:100%;height:200px;" plain="false"
    buttons="#tabsButtons"
>
    <div title="Tab1" >
        1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
    </div>
    <div title="Tab2" iconCls="icon-cut" >
        2
    </div>
    <div title="Tab3" showCloseButton="true">
        3
    </div>
    <div title="Tab4" showCloseButton="true" >
        4
    </div>
</div>
<div id="tabsButtons">
    <input class="mini-combobox" />
    <a class="mini-button">主页切换</a>
</div>    

    <script type="text/javascript">
        mini.parse();

        function onTabPositionChange(value) {
            var tabs = mini.get("tabs1");
            tabs.setTabPosition(value);
        }

        function onTabAlignChange(value) {
            var tabs = mini.get("tabs1");
            tabs.setTabAlign(value);
        }


    </script>
    

</body>
</html>